<template>
<div>
	<h3 class="base-title">带 icon 的输入框</h3>
	<p class="base-content">带有图标标记输入类型</p>

	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<div class="demo-input-suffix">
				属性方式：
				<bh-input placeholder="请选择日期" suffix-icon="bh-icon-date" v-model="input1"></bh-input>
				<bh-input placeholder="请输入内容" prefix-icon="bh-icon-search" v-model="input2"></bh-input>
			</div>
			<div class="demo-input-suffix">
				slot 方式：
				<bh-input placeholder="请选择日期" v-model="input3">
					<i slot="suffix" class="bh-input__icon bh-icon-date"></i>
				</bh-input>
				<bh-input placeholder="请输入内容" v-model="input4">
					<i slot="prefix" class="bh-input__icon bh-icon-search"></i>
				</bh-input>
			</div>
		</div>
		<div class="demo-block-core">
			<div class="demo-block-intro">可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。</div>
			<textarea class="demo-core-box" readonly="readonly" v-model="caseSourceVal" style='height: 400px;'></textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>
</div>
</template>

<script>
const caseSourceVal = `
<template>
<div class="demo-input-suffix">
	属性方式：
	<bh-input placeholder="请选择日期" suffix-icon="bh-icon-date" v-model="input1"></bh-input>
	<bh-input placeholder="请输入内容" prefix-icon="bh-icon-search" v-model="input2"></bh-input>
</div>
<div class="demo-input-suffix">
	slot 方式：
	<bh-input placeholder="请选择日期" v-model="input3">
		<i slot="suffix" class="bh-input__icon bh-icon-date"></i>
	</bh-input>
	<bh-input placeholder="请输入内容" v-model="input4">
		<i slot="prefix" class="bh-input__icon bh-icon-search"></i>
	</bh-input>
</div>
</template>
export default {
	data () {
		return {
			input1: '111',
			input2: '111',
			input3: '111',
			input4: '111',
		};
	},
}
`;
export default {
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/ExvapRr',
			},
			caseSourceVal: caseSourceVal,

			input1: '111',
			input2: '222',
			input3: '333',
			input4: '444',
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		},
	},
}
</script>

<style scoped>
.demo-input-suffix{ display: flex; white-space: nowrap; line-height: 40px; margin-bottom: 20px;}
.demo-input-suffix .bh-input{ margin-left: 15px; width: 200px; }
</style>
